<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="app/js/Axios/axios-0.18.0.js"></script>
    <script src="app/js/Vue/vue.js"></script>
    <script src="/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">

    <button onclick="getLocal()">点我</button>

    <template>
        <el-button type="text" @click="open">点击打开 Message Box</el-button>
    </template>

</div>


<script>


    new Vue({

        el: "#app",
        data() {
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    name: '',
                    region: '',
                    type: ''
                }
            }
        },
        methods: {

            open() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }


        }

    });


    function getLocal() {

        alert("点击了");

        this.$alert('<input type="text" placeholder="请输入账号" />', 'HTML 片段', {
            dangerouslyUseHTMLString: true
        });

    }

    export default {
        data() {
            return {
                labelPosition: 'right',
                formLabelAlign: {
                    name: '',
                    region: '',
                    type: ''
                }
            };
        }
    }


</script>


</body>
</html>